import React, { PureComponent } from 'react';
import { StatusBar, StyleSheet, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
import SplitLine from '../components/split_line/line';

export default class StreamRoomPage extends PureComponent {

    static navigationOptions = ({ navigation }) => ({
        headerStyle: {
            elevation: 0,
            backgroundColor: '#f60',
        },
    });

    constructor(props) {
        super(props);
        this.state = {
            title: '颜值-男神',
            describe: '写一写描述，让别人知道你嘛，小哥哥',
        };
    }

    componentDidMount() {

    }

    /**
     * 开始直播
     * @private
     */
    _onStartVideoPlay = () => {
        // todo 去请求对应后端直播推流地址
        const publishUrl = 'rtmp://pili-publish.qnsdk.com/sdk-live/d964a89f-f4cf-4e74-b8a5-90ba580eb3df?e=1575010996&token=QxZugR8TAhI38AiJ_cptTl3RbzLyca3t-AAiH-Hh:olcANcVDgjMRqhHxW3NJiO1lZ0Y=';
        // todo end
        this.props.navigation.navigate('stream', { publishUrl });
    };

    render() {
        const { title, describe } = this.state;
        return (
            <View style={styles.container}>
                <StatusBar
                    backgroundColor={'#f60'}
                    barStyle={'light-content'}
                />
                <View style={styles.content}/>
                <View
                    style={styles.rootSettings}
                >
                    <TextInput
                        autoCapitalize={'none'}
                        style={styles.title}
                        value={title}
                        maxLength={10}
                        returnKeyType={'done'}
                        placeholder={'请输入房间的标题'}
                        onChangeText={text => this.setState({ title: text })}
                        onSubmitEditing={e => this.setState({ title: e.nativeEvent.text })}
                    />
                    <SplitLine/>
                    <TextInput
                        autoCapitalize={'none'}
                        style={styles.desc}
                        value={describe}
                        multiline={true}
                        maxLength={30}
                        onChangeText={text => this.setState({ describe: text })}
                    />
                </View>
                <View style={styles.videoBtnGroup}>
                    <TouchableWithoutFeedback
                        onPress={this._onStartVideoPlay}
                    >
                        <View style={styles.videoBtn}>
                            <Text style={styles.videoText}>开始视频直播</Text>
                        </View>
                    </TouchableWithoutFeedback>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    content: {
        backgroundColor: '#f60',
        height: 80,
    },
    rootSettings: {
        position: 'absolute',
        backgroundColor: '#fff',
        borderRadius: 8,
        elevation: 8,
        shadowColor: '#d3d3d3',
        shadowOffset: { width: 2, height: 4 },
        shadowOpacity: 0.8,
        shadowRadius: 3,
        marginHorizontal: 25,
        height: 180,
        top: 25,
        right: 0,
        left: 0,
        bottom: 0,
        zIndex: 10,
    },
    title: {
        paddingHorizontal: 15,
        height: 50,
        fontSize: 18,
    },
    desc: {
        paddingHorizontal: 15,
        fontSize: 18,
        flex: 1,
        textAlignVertical: 'top',
    },
    videoBtnGroup: {
        flexDirection: 'row',
        justifyContent: 'center',
        marginTop: 140,
    },
    videoBtn: {
        backgroundColor: '#f60',
        height: 50,
        borderRadius: 25,
        width: 220,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    videoText: {
        color: '#fff',
        fontSize: 16,
    },
});
